<template>
  <view style="display: flex;justify-content: space-between;">
    <!-- 评论者头像 -->
    <view class="comment-item">
      <view class="avatar">
        <u-avatar :src="item.user_id[0].avatar_file?item.user_id[0].avatar_file.url:'../../static/image/user.jpg'"
          size="58"></u-avatar>
      </view>
      <!-- 评论信息 -->
      <view class="wrap" @click="go_reply">
        <view class="username">{{item.user_id[0].nickname?item.user_id[0].nickname:item.user_id[0].username}}</view>
        <view class="comment-content">{{item.comment_content}}</view>
        <view class="info">
          <view class="reply-btn" v-if="!childState">{{item.replyTotal?item.replyTotal+'条回复':"暂无"}} </view>
          <view>
            <uni-dateformat :date="item.comment_date" :threshold="[60000,3600000*24*30]">
            </uni-dateformat>
          </view>
          <view>{{item.province}}</view>
        </view>
      </view>
    </view>
    <!-- 评论的删除按钮 -->
    <view v-if="!closeBtn_state">
      <text class="iconfont icon-a-123-cuowu" style="padding: 10px;font-size: 16px;" @click="icon_del"></text>
    </view>
    <!-- 警告框 -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import {
    ref
  } from "vue"
  import {
    useStore
  } from 'vuex'
  const utilsObj = uniCloud.importObject("utilsObj", {
    customUI: true
  })
  const db = uniCloud.database()
  export default {
    name: "comment-item",
    props: {
      item: {
        type: Object,
        default: {}
      },
      childState: {
        type: Boolean,
        default: false
      },
      closeBtn_state: {
        type: Boolean,
        default: false
      }
    },
    setup(prop, {
      emit
    }) {
      const vuex_store = useStore()
      const uToast = ref(null)
      // 删除评论
      const icon_del = () => {
        // 确认框，以防误点
        uni.showModal({
          title: "请确认删除该条评论",
          success: async (res) => {
            if (res.confirm) {
              uni.showLoading()
              try {
                let getData = await db.collection("pyq_comment").where(
                  `_id == "${prop.item._id}" || reply_comment_id == "${prop.item._id}"`).get()
                let getData_id = []
                getData.result.data.forEach(elm => {
                  getData_id.push(elm._id)
                })
                let res = await db.collection("pyq_comment").where({
                  _id: db.command.in(getData_id)
                }).update({
                  comment_state: false
                })
                // 手动将本地物理状态改为删除
                prop.item.comment_state = false
                prop.item.updated = res.result.updated
                if (prop.childState) {
                  // 减
                  vuex_store.commit('reset_two_level_comment')
                  vuex_store.commit('reduce_two_level_comment', prop.item.reply_comment_id)
                }
                vuex_store.commit('reset_cellback_detail_comment')
                vuex_store.commit('up_cellback_detail_comment', prop.item)
                // 文章评论减一
                utilsObj.operation("pyq_article", "comment_count", prop.item.article_id, -res.result.updated)
                emit("del_comment", prop.item._id)
                uni.hideLoading()
                uni.showToast()
              } catch (e) {
                uni.hideLoading()
                uToast.value.show({
                  title: '非管理员 只能删除自己的评论',
                  type: 'warning'
                })
              }

              // 更新评论状态 物理删除
              // db.collection("pyq_comment").doc(prop.item._id).update({
              //   comment_state: false
              // }).then(res => {
              //   // 手动将本地物理状态改为删除
              //   prop.item.comment_state = false
              //   // vuex是记录每次发布的状态 以便跟主页评论及时联动
              //   vuex_store.commit('reset_cellback_detail_comment')
              //   vuex_store.commit('up_cellback_detail_comment', prop.item)
              //   if (prop.childState) {
              //     // 减
              //     vuex_store.commit('reset_two_level_comment')
              //     vuex_store.commit('reduce_two_level_comment', prop.item.reply_comment_id)
              //   }
              //   // 文章评论减一
              //   utilsObj.operation("pyq_article", "comment_count", prop.item.article_id, -1)
              //   //触发父组件事件 将本地评论去除
              //   emit("del_comment", prop.item._id)
              //   uni.hideLoading()
              //   uni.showToast()
              // }).catch(err => {
              //   uni.hideLoading()
              //   uToast.value.show({
              //     title: '非管理员 只能删除自己的评论',
              //     type: 'warning'
              //   })
              // })              
            }
          }
        })
      }

      // 跳转到reply 实现二级回复
      const go_reply = () => {
        if (prop.childState) {
          uni.showToast({
            title: "暂时只开启了二级回复",
            icon: "none"
          })
          return
        }
        uni.setStorageSync("replayItem", prop.item)
        uni.navigateTo({
          url: "/pages/reply/reply"
        })
      }
      return {
        icon_del,
        uToast,
        go_reply
      }
    }
  }
</script>

<style lang="scss" scoped>
  .comment-item {
    display: flex;

    .wrap {
      flex: 1;
      padding-left: 20rpx;
      padding-bottom: 20rpx;

      .username {
        font-size: 26rpx;
        color: #666;
        padding: 10rpx 0;
      }

      .comment-content {
        font-size: 28rpx;
        color: #111;
        line-height: 1.8em;
        text-indent: 56rpx;
      }

      .info {
        font-size: 20rpx;
        color: #666;
        display: flex;
        padding: 10rpx 0;
        align-items: center;

        view {
          margin-right: 25rpx;
        }

        .reply-btn {
          padding: 6rpx 18rpx;
          background: #e4e4e4;
          border-radius: 30rpx;
        }
      }
    }
  }
</style>
